.module_customization{
  background-color: #FFFFFF;
  margin-top: 32px;
  >div[class^="module"]{
    width: $homeW;
    margin: 0px auto 0;
    /*去除子元素设置 display: inline-block;导致的间隙*/
    font-size:0;
    letter-spaceing: -4px;
  }
  &.isPhoneShow{
    display: none;
   }
   &.isPcShow{
     display: block;
   }

  .module_item_tag{
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    &:hover{
      .module_layer{
        display: block;
      }

    }
    .module_layer{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(54, 52, 52, 0.12);
      z-index: 3;
      display: none;
    }
    .module_item_content{
      position: absolute;
      left: 0;
      width: 100%;
      bottom: 44px;
      padding-left: 40px;
      text-align: left;
      z-index: 4;
      .first_title{
        font-size: 24px;
        font-weight: 700;
        color: #FFFFFF;
        min-height: 40px;
        margin-bottom: 8px;
      }
      .second_title{
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 16px;
        min-height: 32px;
      }
      p.readMore{
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #FFFFFF;
        text-decoration: none;
        cursor: pointer;
        display: inline-block;
        margin-top: 24px;
        span{
          font-size: 24px;
          color: #FFFFFF;
        }
        i{
          top: 6px;
          border-color: #FFFFFF;
          color: #FFFFFF;
          &::after{
            background-color: #FFFFFF;
          }
          &::before{
            color: #FFFFFF;
          }
        }
        &.noname{
          padding: 0;
        }
      }
    }
  }
}
// 间距40px
$spacing: 32px;
$spacing1: 16px;
$spacing2: 8px; // 16/2
.module4-1{
  >.module_item_tag{
    width: calc(50% - 16px);
    padding-bottom: calc(25% - 8px); // 高是宽的一半
    height: 0;
    display: inline-block;
    &:nth-of-type(2n){
      margin-left: $spacing1; 
    }
    &:nth-of-type(2n+1){
      margin-right: $spacing1;
    }
    &:nth-of-type(1){
      margin-bottom: $spacing1;
    }
    &:nth-of-type(2){
      margin-bottom: $spacing1;
    }
    &:nth-of-type(3){
      margin-top: $spacing1;
    }
    &:nth-of-type(4){
      margin-top: $spacing1;
    }

  }
}
// 40*3 /4 = 30 间距40px 每一个的宽度减30
// 32*3/4 = 24 
.module4-2{
  >.module_item_tag{
    width: calc(25% - 24px);
    padding-bottom: calc((25% - 24px)*4/3);
    height: 0;
    display: inline-block;
    margin-right: $spacing;
    &:last-of-type{
      margin-right: 0;
    }
  }
}
// 
.module4-3{
  >.module_item_tag{
    padding-bottom: 33.3%;
    height: 0;
    display: inline-block;
    &:nth-of-type(1){
      width: calc(66.7% - 16px);
      padding-bottom: calc(33.3% - 16px);
      margin-right: $spacing1;
      margin-bottom:  $spacing1;
    
    }
    &:nth-of-type(2){
      width: calc(33.3% - 16px);
      padding-bottom: calc(33.3% - 16px);
      margin-left:  $spacing1;
      margin-bottom:  $spacing1;
      .el-button{
        display: block;
        margin: 16px auto 0;
      }
    }
    &:nth-of-type(3){
      margin-top: 20px;
      width: calc(33.3% - 16px);
      padding-bottom: calc(33.3% - 16px);
      margin-right:  $spacing1;
      .el-button{
        display: block;
        margin: 16px auto 0;
      }
    }
    &:nth-of-type(4){
      margin-top:  $spacing1;
      width: calc(66.7% - 16px);
      padding-bottom: calc(33.3% - 16px);
      margin-left:  $spacing1;
    }
   
  }
}
// 32*2/3 = 21.3
.module4-4{
  >.module_item_tag{
   
    height: 0;
    display: inline-block;

    &:nth-of-type(1){
      width: 100%;
      margin-bottom:  $spacing1;
      padding-bottom: 50%;
    }

    &:nth-of-type(2){
      width: calc(33.3% - 21.3px);
      padding-bottom: calc(33.3% - 21.3px);
      margin:  $spacing1 $spacing1 0 0;
      .el-button{
        display: block;
        margin: 16px auto 0;
      }
    }
    &:nth-of-type(3){
      width: calc(33.3% - 21.3px);
      padding-bottom: calc(33.3% - 21.3px);
      margin: $spacing1 $spacing1 0;
      .el-button{
        display: block;
        margin: 16px auto 0;
      }
    }
    &:nth-of-type(4){
      margin-top: $spacing1;
      width: calc(33.3% - 21.3px); //大小1：1
      padding-bottom: calc(33.3% - 21.3px);
      margin-left: $spacing1;
      .el-button{
        display: block;
        margin: 16px auto 0;
      }
    }
   
  }
}